<template>
	<view>
		<view class="receiptinfo" v-if="address" @click="settingPage">
			<view class="receiptinfo_text">
				<view class="receiptinfo_up">
					{{address.consignee}} : {{address.phone}}
				</view>
				<view class="receiptinfo_down">
					<view class="receiptinfo_down_icon">
						<u-icon name="map-fill" color="#ff7733" size="40"></u-icon>
					</view>
					<view class="receiptinfo_down_text">
						{{address.location + address.detailedAddress | strLength(18)}}
					</view>
				</view>
			</view>
			<view class="receiptinfo_icon">
				<u-icon name="arrow-right" color="#bebebe" size="20"></u-icon>
			</view>
		</view>
		<u-alert v-else class="no_address_title" title="您目前没有可用地址,点击添加地址吧!" fontSize="24" :show-icon="true"
			type="warning" center @click="settingPage"></u-alert>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"
	export default {
		name:'AddressSelect',
		props: ['addressId'],
		computed: {
			...mapGetters({
				getDefaultAddress: 'getDefaultAddress',
				getUserAddressById: "getUserAddressById"
			}),
			address(){
				const {addressId,getUserAddressById} = this
				if(addressId) return getUserAddressById(addressId)
				return this.getDefaultAddress
			}
		},
		methods:{
			settingPage(){
				//  跳转到修改地址的页面
				this.pushNewPage("addressList")
			}
		},
		created() {
			// 获取地址数据
			this.$store.dispatch("loadAddress")
		}
	}
</script>

<style>
	.receiptinfo {
		width: 100%;
		height: 150rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		border-radius: 20rpx;
		margin: 40rpx 0;
		padding: 0 0 0 40rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 0 10rpx #dddddd;
	}
	
	.receiptinfo_text {
		width: 88%;
		margin-right: 10rpx;
	}
	
	.receiptinfo_icon {
		width: 30rpx;
	}
	
	.receiptinfo_up,
	.receiptinfo_down {
		width: 100%;
		height: 50rpx;
		font-size: 32rpx;
		margin-bottom: 5rpx;
		color: rgba(128, 128, 128, 1);
		display: flex;
		flex-direction: row;
	}
	
	.receiptinfo_up {
		font-size: 28rpx;
		font-weight: bold;
		margin-left: 15rpx;
	}
	
	.receiptinfo_down_icon {
		margin-top: 5rpx;
		margin-left: 5rpx;
	}
	.receiptinfo_down_text{
		font-size: 26rpx;
	}
	
	.no_address_title{
		margin: 30rpx 0;
	}
	
</style>